﻿<%@ page contentType="text/html;charset=utf-8" %>
<html>
<head>
    <!-- Meta-Information -->
    <title>登录</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">

<%--  edit by fjh --%>
<style>
  .bg-img{
    /*background-image: url("images/resource/bg-img1.png");*/
  }
</style>

</head>
<body class="expand-data panel-data">

<%--edit by fjh--%>
<div class="panel-content">
    <div class="lgn-wrp grysh">
        <div class="bg-img"></div>
        <div class="lgn-innr">
            <div class="widget lgn-frm">
                <div class="frm-tl">
                    <h4>登录</h4>
                    <span>酒店管理系统</span>
                </div>
                <form id="form-login" action="${pageContext.request.contextPath}/verifyLogin" method="post">
                    <div class="row mrg10">
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <input class="brd-rd5" id="input-account" name="account" type="text" placeholder="账户ID/手机" maxlength="11"/>
                        </div>
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <input class="brd-rd5" id="input-password" name="password" type="password" placeholder="密码" maxlength="16"/>
                        </div>
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <span class="chbx"><input type="checkbox" name="isAdmin" value="true" id="chk1" /><label for="chk1">登录为管理员</label></span>
                        </div>
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <button class="green-bg brd-rd5" type="submit" id="btn_submit">登录</button>
                        </div>
<%--                        <div class="col-md-12 col-sm-12 col-lg-12">--%>
<%--                            <a href="#" title="" class="frgt">Forget password?</a>--%>
<%--                        </div>--%>
<%--                        <div class="col-md-12 col-sm-12 col-lg-12">--%>
<%--                            <a class="brd-rd5 blue-bg act-btn" href="#" title="">Create An Account</a>--%>
<%--                        </div>--%>
                    </div>
                </form>
                <div class="frm-tl">
                    <span style="color: #f00;" id="frm-tip">${tip}</span>
                </div>
            </div>
        </div>
        <footer>
          <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2020 - 2021</p>
          <span>酒店管理系统</span>
        </footer>
    </div><!-- Login Wrapper -->
</div><!-- Panel Content -->

<%--edit by fjh--%>
<%--登录表单校验--%>
<script type="text/javascript">
  document.getElementById("form-login").onsubmit = function(){
    var check = checkAccount() && checkPassword()
    if(check){
      document.getElementById("frm-tip").innerHTML = ""
    }
    return check
  }


  function checkAccount(){
    var account = document.getElementById("input-account").value;
    var reg_account = /^[1-9][0-9]{0,10}$/

    var flag = reg_account.test(account)
    if(!flag){
      document.getElementById("frm-tip").innerHTML = "账户格式有误"
    }
    return flag
  }

  function checkPassword(){
    var password = document.getElementById("input-password").value;
    var reg_password = /^[a-zA-Z0-9]{6,16}$/

    var flag = reg_password.test(password)
    if(!flag){
      document.getElementById("frm-tip").innerHTML = "密码格式有误"
    }
    return flag
  }

</script>


<footer>
  <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
  <span>10GB of 250GB Free.</span>
</footer>


<!-- Vendor: Javascripts -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>


</body>
</html>